<template>
  <van-nav-bar
      title="消息提醒"
      style="width: 400px"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="notification-settings">
    <van-cell-group>
      <van-cell title="评论与@"  @click.native="openSetting('comment')"/>
      <van-switch v-model="comment" />
      <van-cell title="点赞"  @click.native="openSetting('like')"/>
      <van-switch v-model="like" />
      <van-cell title="粉丝"  @click.native="openSetting('follower')"/>
      <van-switch v-model="follower" />
      <van-cell title="系统通知"  @click.native="openSetting('system')"/>
      <van-switch v-model="system" />
      <van-cell title="消息"   @click.native="openSetting('message')"/>
      <van-switch v-model="message" />
    </van-cell-group>

    <van-card>
      <div slot="header">定时推送打卡提醒</div>
      <div class="time-picker">
        <span>提醒时间</span>
        <van-time-picker v-model="remindTime" columns="2" />
      </div>
      <div class="repeat-time">
        <span>重复时间</span>
        <van-checkbox-group v-model="repeatDays">
          <van-checkbox v-for="(day, index) in days" :key="index" :name="day.name">{{ day.name }}</van-checkbox>
        </van-checkbox-group>
      </div>
    </van-card>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
const router = useRouter();
const comment = ref(true);
const like = ref(true);
const follower = ref(true);
const system = ref(true);
const message = ref(true);

import {ref} from "vue";
const onClickLeft = () => {
  router.push("/systemSettings");
  // 返回按钮逻辑
};
const remindTime = ref('06:30');
const repeatDays = ref(['工作日', '周末']);
const days = ref([
  { name: '周一' },
  { name: '周二' },
  { name: '周三' },
  { name: '周四' },
  { name: '周五' },
  { name: '周六' },
  { name: '周日' },
]);

function openSetting(settingType) {
  // 这里应该打开对应的设置界面
}
</script>

<style scoped>
.notification-settings .time-picker span {
  display: inline-block;
  width: 100px;
}
.repeat-time {
  margin-top: 10px;
}
.repeat-time span {
  display: inline-block;
  width: 100px;
}
</style>